<template>
  <div>

      <el-dialog
        width="80%"
        :visible.sync="DialogFormVisibleCom"
        append-to-body
        >
        <ex-edit-table
        ref='exEditTable'
        :tableColumn="tableColumn"
        :tableData="tableData"
        :loading.sync="loading"
        :editRules="editRules"
        @saveRowEventEmit="saveRowEventEmit"
        @removeRowEventEmit="removeRowEventEmit"
        @editRowEventEmit="editRowEventEmit"
        @insertEventEmit="insertEventEmit"
        >
        
        </ex-edit-table>


        <!-- 分页组件 -->
      <Pagination
        v-show="tablePage.totalResult>0"
        :total="tablePage.totalResult"
        :page.sync="tablePage.currentPage"
        :limit.sync="tablePage.pageSize"
        @pagination="pageFindList"
      />
    </el-dialog>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'
import XEUtils,{ isNaN } from 'xe-utils'
import { filterAllRowBynormData } from '@/utils/index'
// 基础表格组件
import ExEditTable from '@/components/VxeTable/ExEditTableB'
// 分页
import Pagination from '@/components/Pagination'

import {
  findOutOfTheGinseng,
  addOutOfTheGinsengM,
  updateOutOfTheGinseng,
  delOutOfTheGinseng,
  addOutOfTheGinseng,
  enterTheParameter
  } from './service/baseApi'

export default {
  name: 'OutParameterTable',
  components: {
    ExEditTable,
    Pagination
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    /* 主表行数据 */
    currentRow: {
      type: Object,
      default() {
        return {}
      }
    },
    /* 子表行数据 */
    sonCurrentRow: {
      type: Object,
      default() {
        return {}
      }
    },
    enterTheParameterOptions:{
      type: Array,
      default() {
        return []
      }
    }
    // //期限点编号--待
    // stayTermCodeOptions: {
    //   type: Array
    // },
    // //期限点编号--叠
    // sppstTermCodeOptions: {
    //   type: Array
    // },
    // //期限点编号--合
    // mergeTermCodeOptions: {
    //   type: Array
    // },
  },
  // 定义属性
  data() {
    
    return {
      // 表单数据对象
      formSubmitData: {
        id: undefined,
        m_id: "",
        order_num: "",
        prm_type: "",
        in_vrb_name: "",
        in_vrb_value: "",
        out_vrb_name:""
        // remark: "" //备注
      },

      
      /* 分页相关 */
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 50,  /* TODO: 每页页数，api接口数据超过50时，需要修改此处 */
        totalResult: 0
      },

      /* 表格相关 */
      loading:false,
      tableData: [],
      prm_typeKV:{},
      tableColumn: [
        // { type: 'seq', width: 60 },
        { type: 'checkbox', width: 50 },
        { field: 'id', width: 160,title: 'ID',visible:false },
        { field: 'm_id', width: 160,title: 'MID',visible:false },
        { 
          field: 'order_num',width: 160, title: '出参顺序'
        },
        // { 
        //   field: 'prm_type',width: 160, title: '值', 
        //   editRender: { 
        //     name: 'ElInput',
        //     props: { size: 'small'},
        //   } 
        // },
        {
          field: 'prm_type', title: '出参类型', 
          editRender: { 
            name: 'ElSelect', 
            options: [] ,
            props: { size: 'small', clearable: true },
          },
          slots:{
            default: ({ row }) => {
              return [
                <span>{ this.prm_typeKV[`${row.prm_type}`] }</span>
              ]
            },
          }
        },
        { 
          field: 'in_vrb_name', title: '出参变量名', 
          editRender: { 
            name: 'ElInput',
            props: { size: 'small'},
          } 
        },
        { 
          field: 'in_vrb_value', title: '出参变量名-常量值', 
          editRender: { 
            name: 'ElInput',
            props: { size: 'small'},
          } 
        },
        { 
          field: 'out_vrb_name', title: '输出变量名', 
          editRender: { 
            name: 'ElInput',
            props: { size: 'small'},
          } 
        },


        /* 原 */
        // { 
        //   field: 'm_cv_type', width: 160,title: '原曲线类型', 
        //   editRender: { 
        //     name: 'ElSelect', 
        //     options: [] ,
        //     props: { size: 'small', clearable: true },
        //     events: { change: this.mCvTypeChange }
        //   } 
        // },
        // { 
        //   field: 'm_cv_code', width: 160,  title: '原曲线', 
        //   editRender: { 
        //     name: 'ElSelect', 
        //     options: [] ,
        //     props: { size: 'small', clearable: true },
        //     events: { change: this.mCvCodeChangeEmit }
        //   },
        //   slots:{
        //     default: ({ row }) => {
        //       return [
        //         <span>{ row.m_cv_name }</span>
        //       ]
        //     },
        //   }
        // },
        // { 
        //   field: 'm_term_code', width: 160,title: '原曲线期限点', 
        //   editRender: { 
        //     name: 'ElSelect', 
        //     options: [] ,
        //     props: { size: 'small', clearable: true },
        //   },
        //   slots:{
        //     default: ({ row }) => {
        //       return [
        //         <span>{ row.m_term_name }</span>
        //       ]
        //     },
        //   }
        // },
        // /* 相减 */
        // { 
        //   field: 's_cv_type', width: 160,title: '相减曲线类型', 
        //   editRender: { 
        //     name: 'ElSelect', 
        //     options: [] ,
        //     props: { size: 'small', clearable: true },
        //     events: { change: this.sCvTypeChange }
        //   }
        // },
        // { 
        //   field: 's_cv_code', width: 160,title: '相减曲线', 
        //   editRender: { 
        //     name: 'ElSelect', 
        //     options: [] ,
        //     props: { size: 'small', clearable: true },
        //     events: { change: this.sTermCodeChangeEmit }
        //   },
        //   slots:{
        //     default: ({ row }) => {
        //       return [
        //         <span>{ row.s_cv_name }</span>
        //       ]
        //     },
        //   }
        // },
        // {
        //   field: 's_term_code', width: 160,title: '相减曲线期限点', 
        //   editRender: {
        //     name: 'ElSelect', 
        //     options: [] ,
        //     props: { size: 'small', clearable: true },
        //   },
        //   slots:{
        //     default: ({ row }) => {
        //       return [
        //         <span>{ row.s_term_name }</span>
        //       ]
        //     },
        //   }
        // },
        // { 
        //   field: 'adj_type', width: 160,title: '调整类型', 
        //   editRender: {
        //     name: 'ElSelect', 
        //     options: [] ,
        //     props: { size: 'small', clearable: true },
        //   }
        // },
        // { 
        //   field: 'adj_value',width: 160, title: '值', 
        //   editRender: { 
        //     name: 'ElInputNumber',
        //     props: { size: 'small'},
        //   } 
        // },
        // { 
        //   field: 'adj_cp', width: 160,title: '调整单位', 
        //   editRender: {
        //     name: 'ElSelect', 
        //     options: [] ,
        //     props: { size: 'small', clearable: true },
        //   }
        // },

        // { 
        //   field: 'remark', width: 160,title: '备注', 
        //   editRender: {
        //     name: 'ElInput', 
        //     options: [] ,
        //     props: { size: 'small', clearable: true ,type:'textarea',rows:1},
        //   } 
        // },

       /* jsx 书写示例 */
        //   { 
        //   field: 'm_cv_code', 
        //   width: 160,
        //   title: '原曲线', 
        //   editRender: { autofocus: '.vxe-default-select' },
        //   slots:{
        //     default: ({ row }) => {
        //       return [
        //         <span>￥{ row.m_cv_code }元</span>
        //       ]
        //     },
        //     edit: ({ row }) => {
        //       return [
        //         <vxe-select v-model={row.m_cv_code} placeholder="" onChange={ evnt => this.mCvTypeChange({evnt, row}) }>
        //           {
        //             this.bCCurveTypeOptions.map(item=>{
        //               return <vxe-option  key={item.code} value={item.code} label={item.name}></vxe-option>
        //             })
        //           }
        //        </vxe-select>
        //         // <input type="number" class="vxe-default-select" onChange={ evnt => this.mCvTypeChange({evnt, row}) } v-model={ row.m_cv_code }  />
        //       ]
        //     }
        //   }
        // },
        { title: '操作',fixed:'right', width: 200, slots: { default: 'operate' } }
      ],
      editRules:{
        prm_type: [
          { required: true, message: '不能为空' },
        ],
        in_vrb_name: [
          { required: true, message: '不能为空' },
        ],
        in_vrb_value: [
          { required: true, message: '不能为空' },
        ],
        
      }

    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    DialogFormVisibleCom: {
      get() {
        return this.dialogFormVisible
      },
      set(val) {
        this.$emit('update:dialogFormVisible', val)
      }
    },
  },
  // 监控data中的数据变化
  watch: {
    sonCurrentRow(dataVal, oldVal){
      this.findLists()
      this.findenterTheParameter()
    },
  },
  // 方法集合
  methods: {
    // 出参顺序的自增
    async getaddOutOfTheGinseng() {
      return await addOutOfTheGinseng().then(({data}) => {
        return data.rows.order_num
      })
    },
    // 获取入参类型-出参类型
    findenterTheParameter(){
      enterTheParameter({}).then(({data}) => {
        console.log('daadadada',data);

        const prm_type_column = this.$refs.exEditTable.$refs.xGrid.getColumnByField('prm_type')
        prm_type_column.editRender.options = XEUtils.map(data.rows, item =>{
          this.prm_typeKV[`${item.code}`] = item.name
          return {
            label:item.name,
            value:item.code
          }
        })

      })
    },
    async insertEventEmit (row) {

      const order_num  =  await this.getaddOutOfTheGinseng().then((res) => res)
      let record = {
        order_num
      }
      let { row: newRow } = await this.$refs.exEditTable.$refs.xGrid.insertAt(record, row)
      console.log('newrow',newRow);
      await this.$refs.exEditTable.$refs.xGrid.setActiveRow(newRow)

    },

    /* 点击编辑按钮 */
    async editRowEventEmit(row){
      // 当前行开启编辑模式
      await this.$refs.exEditTable.$refs.xGrid.setActiveRow(row)
    },
    async saveRowEventEmit(row){

        // 排除FormSubmitData没有的元素
        row = filterAllRowBynormData({
          allRow: XEUtils.clone(row, true),
          normData:this.formSubmitData
        })

      if (XEUtils.isEmpty(row.id)) {
        await addOutOfTheGinsengM({
          m_id: this.sonCurrentRow.id,
          ...row,  //检索条件
        }).then(({data}) => {
          this.findLists()
        })

      }else{
  
        await updateOutOfTheGinseng({
          m_id: this.sonCurrentRow.id,
          ...row,  //检索条件
        }).then(({data}) => {
          this.findLists()
        })
      }
    
    },
    removeRowEventEmit(row){

      delOutOfTheGinseng({
        id: row.id,
        // m_id: this.sonCurrentRow.id,
      }).then(({data}) => {
        this.findLists()
      })

    },


    /* API数据操作相关 */


    /* 查询 */
    findLists(){

      this.loading = true

      findOutOfTheGinseng({
        // page: this.tablePage.currentPage, // 当前页
        // pageSize: this.tablePage.pageSize, // 每页条数
        m_id: this.sonCurrentRow.id,
        // ...this.formSearchData,  //检索条件
      }).then(({data}) => {
        // 给表格数据赋值
        this.tableData = data.rows
        // 给分页总数赋值
        this.tablePage.totalResult = data.total
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      })
    },


    pageFindList() {
      this.findLists()
    },

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取列表数据
    // this.findLists()
    // console.log('enterTheParameterOptionsenterTheParameterOptionsenterTheParameterOptions',this.enterTheParameterOptions);
    // this.findenterTheParameter()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  
</style>